<template>
  <div class="lt_caroousel">
    <div ref="carouselItemRef" class="lt_caroousel_item" @mouseenter="stop" @mouseleave="start">
      <img :src="urls[urls.length - 1]" />
      <template v-for="item in urls" :key="item">
        <img :src="item" />
      </template>
      <img :src="urls[0]" />
    </div>
    <!-- 按钮 -->
    <svg
      t="1734619012400"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="6002"
      width="128"
      height="128"
      class="row left"
      @click="rowHandler('prev')"
    >
      <path
        d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
        p-id="6003"
      ></path>
    </svg>
    <svg
      t="1734618976831"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="5033"
      width="128"
      height="128"
      class="row right"
      @click="rowHandler('next')"
    >
      <path
        d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
        p-id="5034"
      ></path>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref, useTemplateRef } from 'vue'

const props = defineProps({
  urls: {
    type: Array as PropType<string[]>,
    required: true,
    default: () => []
  },
  interval: {
    type: Number as PropType<number>,
    default: 3000
  }
})

const carouselItemRef = useTemplateRef<HTMLDivElement>('carouselItemRef') as any // 切换位移的盒子

const currentIndex = ref(1) // 当前激活的索引

const nextPage = () => {
  // 下一页
  if (carouselItemRef.value) {
    currentIndex.value++
    if (currentIndex.value > props.urls.length) {
      carouselItemRef.value.style.transform = `translateX(-${currentIndex.value * 100}%)`
      setTimeout(() => {
        currentIndex.value = 1
        carouselItemRef.value.style.transition = 'none'
        carouselItemRef.value.style.transform = `translateX(-${currentIndex.value * 100}%)`
      }, 300)
    } else {
      carouselItemRef.value.style.transition = 'all 0.3s'
      carouselItemRef.value.style.transform = `translateX(-${currentIndex.value * 100}%)`
    }
  }
}

const prevPage = () => {
  // 上一页
  currentIndex.value--
  if (currentIndex.value < 1) {
    carouselItemRef.value.style.transform = `translateX(-${currentIndex.value * 100}%)`
    setTimeout(() => {
      currentIndex.value = props.urls.length
      carouselItemRef.value.style.transition = 'none'
      carouselItemRef.value.style.transform = `translateX(-${currentIndex.value * 100}%)`
    }, 300)
  } else {
    carouselItemRef.value.style.transition = 'all 0.3s'
    carouselItemRef.value.style.transform = `translateX(-${currentIndex.value * 100}%)`
  }
}

// 点击箭头
const rowHandler = (type: string) => {
  if (type === 'next') {
    nextPage()
  } else {
    prevPage()
  }
}

// 自动轮播
const timer = ref<any>(null)
timer.value = setInterval(() => {
  nextPage()
}, props.interval)

// 开始轮播
const start = () => {
  if (!timer.value) {
    timer.value = setInterval(() => {
      nextPage()
    }, props.interval)
  }
}

// 停止轮播
const stop = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}
</script>

<style scoped lang="scss">
.lt_caroousel {
  width: 95%;
  overflow: hidden;
  position: relative;
  .lt_caroousel_item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: all 0.3s;
    background-color: red;
    cursor: pointer;
    img {
      width: 100%;
      flex-shrink: 0;
    }
  }
  .row {
    fill: #999;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    &:hover {
      fill: #fff;
    }
    &.left {
      left: 0;
    }
    &.right {
      right: 0;
    }
  }
}
</style>
